<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弥勒佛像3D在线展示</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r158/three.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>弥勒佛像3D展示平台</h1>
            <p>上传3D模型文件，在线查看弥勒佛像</p>
        </div>
        
        <div id="file-upload-section">
            <input type="file" id="file-input" accept=".obj,.fbx,.gltf,.glb" />
            <label for="file-input" class="upload-btn">
                <i class="fas fa-upload"></i> 上传3D模型文件
            </label>
            <span id="file-name">未选择文件</span>
        </div>

        <div id="canvas-container">
            <canvas id="three-canvas"></canvas>
            <div id="loading" class="loading">
                <div class="spinner"></div>
                <p>正在加载模型...</p>
            </div>
        </div>

        <div id="controls">
            <button id="reset-view" class="control-btn">重置视角</button>
            <button id="toggle-rotation" class="control-btn">暂停旋转</button>
            <button id="fullscreen" class="control-btn">全屏查看</button>
        </div>

        <div id="info">
            <p>使用鼠标左键拖拽旋转，滚轮缩放，右键平移</p>
        </div>
    </div>

    <script src="js/three-setup.js"></script>
    <script src="js/model-loader.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
